<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <link rel="stylesheet" href="layui-v2.7.0-rc5/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui_ext/cardPage.css" media="all">


</head>
<body>

<div id="test01"></div>


<pre class="layui-code">
        //配置介绍
        cols: [],//列名
        data: [],//数据
        colMd: 3,//列占行的宽度 3/12
        url: '',
        method: 'get',
        contentType: false,
        where: {},   // 查询条件
        sortName: '', //默认排序字段
        sortType: ''  //默认排序类型 asc desc
        data: ''      // 静态数据 如果存在静态数据 则不会走http查询
        parseData: function(res){} //'解析数据格式成为table需要的格式'
        multiSortSwitch: 'false' //'是否开启多字段排序'



       // cols
        {
          field: 'name',   //字段名称 如果字段对象元素为数组 则需要加上 titleFomart与contextFomart函数处理对应标题与内容
          title: '商品名称', //标题
          topName: true    // 是否属于卡片顶部名称
          sort： false     // 是否可以排序
          fomart: function (item, value): //格式化内容 item：该行对象 value 该字段原有值
          titleFomart: function (item)  //字段对象元素为数组时生效 , item为数组中的对象元素 返回标题内容
          contextFomart: function (item) //字段对象元素为数组时生效 , item为数组中的对象元素 返回内容
        }
      ps: '排序目前只支持对象类型的字段,不支持数组类型字段'

</pre>

</body>
<script type="text/html" id="toolbarDemo">
    <div class="card-btn-container">
        <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" card-event="delOne">删除</a>
    </div>
</script>
<script src="layui-v2.7.0-rc5/layui/layui.js" charset="utf-8"></script>
<script>
    layui.extend({
        cardPage: './layui_ext/cardPage' // {/}的意思即代表采用自有路径，即不跟随 base 路径
    })
    layui.use(['laypage', 'layer', 'cardPage'], function () {
        var cardPage = layui.cardPage
        ;
        let insCardPage = cardPage.render({
            cols: [
                {
                    field: 'name',
                    title: '商品名',
                    topName: true
                },
                {
                    field: 'id',
                    title: '商品id'
                }
                ,
                {
                    field: 'price',
                    title: '价格',
                    fomart: function (row, value) {
                        if (row.price > 50) {
                            return '<span style="color: red">' + row.price + '</span>'
                        }
                        return row.price;
                    },
                    sort: true
                },
                {
                    field: 'salesVolume',
                    title: '销量',
                    sort: true
                },
                {
                    field: 'attrList',
                    // 是否属于动态数组(不确定返回元素个数)
                    // dynamicArray: true,
                    // 标题格式化
                    titleFomart: function (item) {
                        return item.attrName;
                    },
                    // 内容格式化
                    contextFomart: function (item) {
                        return item.attrValue + "/" + item.attrValueMax;
                    }

                }


            ],
            url: "./data/data1.json",
            // 数据类型格式化
            parseData: function (res) {
                return {records: res.data.recordsCustom, total: res.data.totalCustom};
            },
            method: 'post',
            contentType: true,
            page: {disable: true},
            multiSortSwitch: true,
            toolbar: '#toolbarDemo',
            elem: '#test01'
        });
        insCardPage.on('delOne', function (item) {
            layer.confirm('确认删除么？', {
                btn: ['确定', '取消'] //可以无限个按钮
            }, function (index, layero) {
                layer.msg("删除成功", {icon: 1, time: 1500})
                insCardPage.reload({
                    where: {}
                })
            }, function (index) {
                //按钮【按钮二】的回调
            });
        })


    })
</script>
</html>
